<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">

      <ui:define name="head">
        <style type="text/css">
            .ui-stack {
                z-index: 1000;
            }
        </style>
	</ui:define>

    
    <ui:define name="title">
        Menu - <span class="subitem">Stack</span>
    </ui:define>

    <ui:define name="description">
        Stack displays menuitems in stacked format.
    </ui:define>

    <ui:param name="documentationLink" value="/components/stack" />

    <ui:define name="implementation">
        Stack is displayed at bottom right corner of the page. Clicking the basket icon toggles the items.
        
        <p:stack icon="/resources/demo/images/dock/stack.png" expanded="true">
            <p:menuitem value="Home" icon="/resources/demo/images/dock/home.png" url="#"/>
            <p:menuitem value="Music" icon="/resources/demo/images/dock/music.png" url="#"/>
            <p:menuitem value="Video" icon="/resources/demo/images/dock/video.png" url="#"/>
            <p:menuitem value="Email" icon="/resources/demo/images/dock/email.png" url="#"/>
            <p:menuitem value="Portfolio" icon="/resources/demo/images/dock/portfolio.png" url="#"/>
        </p:stack>
    </ui:define>

</ui:composition>